<link rel="stylesheet" href="assets/store/css/goods.css?v=<?= $version ?>">
<style>
    .am-selected-btn{text-align: left;}
</style>
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">基本信息</div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约ID </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[order_id]"
                                           value="<?= $order_id ?>" readonly>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3  am-u-lg-2 am-form-label form-require"> 选择用户 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <div class="widget-become-goods am-form-file am-margin-top-xs">
                                        <button type="button"
                                                class="j-selectUser upload-file am-btn am-btn-secondary am-radius">
                                            <i class="am-icon-cloud-upload"></i> 选择用户
                                        </button>
                                        <input type="hidden" class="user-id" name="user_ids">
                                        <div class="user-list uploader-list am-cf">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3  am-u-lg-2 am-form-label form-require"> 选择订单 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <div class="widget-become-goods am-form-file am-margin-top-xs">
                                        <button type="button"
                                                class="j-selectOrder upload-file am-btn am-btn-secondary am-radius">
                                            <i class="am-icon-cloud-upload"></i> 选择订单
                                        </button>
                                        <div class="user-order-list uploader-list am-cf">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require"> 商品名称 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select id="nameSelect" name="model[user_goods_sku]" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                                placeholder:'请选择商品名称', maxHeight: 400}">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>

                            

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约类型</label>
                                <!-- <div class="am-u-sm-9 am-u-end">
                                    <select name="model[type_id]" class="type-select" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择预约状态', maxHeight: 400}">
                                        <option value=""></option>
                                        <?php if (isset($type_list)): foreach ($type_list as $item): ?>
                                            <option value="<?= $item['type_id'] ?>">
                                                <?= $item['name'] ?></option>
                                        <?php endforeach; endif; ?>
                                    </select>
                                </div> -->
                                <div class="am-u-sm-9 am-u-end">
                                    <input id="orderType" type="text" class="tpl-form-input"
                                           value="" readonly>
                                    <input id="orderType1" type="hidden" class="tpl-form-input" name="model[type_id]"
                                    value="" readonly>
                                </div>
                            </div>
                            <input type="hidden" class="sel_type_name" name="sel_type_name" value="">

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约日期</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input id="date_id" type="text" name="model[appointment_date]"
                                           class="am-form-field"
                                           value="<?= date("Y-m-d", time()) ?>"
                                           placeholder="请选择预约日期"
                                           data-am-datepicker>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">服务人员</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select id="select" name="model[service_id]" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择服务人员', maxHeight: 400}" onchange="change_server($(this).val())">
                                        <option value=""></option>
                                        <?php if (isset($service_list)): foreach ($service_list as $item): ?>
                                            <option value="<?= $item['user_id'] ?>">
                                                <?= $item['real_name'] ?></option>
                                        <?php endforeach; endif; ?>
                                    </select>
                                </div>
                            </div>
                            <script>
                                function change_server(server){
                                    var type = $("#orderType1").val();
                                    var date = $("#date_id").val();
                                    $.ajax({
                                        type : "POST",
                                        contentType: "application/json;charset=UTF-8",
                                        url : '/index.php?s=/store/appointment.order/get_time_list&type_id=' + type + '&server=' + server+ '&date=' + date,
                                        success:function(res){
                                            console.log(res)
                                            var str = '';
                                            for (let i = 0; i < res.length; i++) {
                                                if(res[i].target){
                                                    str += `<option value="${res[i].time_id}">${res[i].name} （${res[i].target}）</option>`
                                                }else{
                                                    str += `<option value="${res[i].time_id}">${res[i].name}</option>`
                                                }

                                            }
                                            $('#yuyueTime')[0].innerHTML = str
                                        }
                                    })
                                }
                            </script>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约时间</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select id="yuyueTime" name="model[time_id][]" required
                                            multiple data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择预约时间', maxHeight: 400}">
                                        <option value=""></option>
                                        <?php if (isset($time_list)): foreach ($time_list as $item): ?>
                                            <option value="<?= $item['time_id'] ?>">
                                                <?= $item['name'] ?></option>
                                        <?php endforeach; endif; ?>
                                    </select>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label"> 备注 </label>
                                <div class="am-u-sm-9 am-u-md-6 am-u-lg-5 am-u-end" >
                                    <input type="text" class="tpl-form-input" name="model[order_desc]"
                                           value="" placeholder="备注信息" >
                                    <!-- <div class="help-block">
                                        <small>注：只有保洁类型的需要设置时间</small>
                                    </div> -->
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约地址</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[address]"
                                           value="">
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">预约状态</label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select name="model[status]" required
                                            data-am-selected="{searchBox: 1, btnSize: 'sm',
                                             placeholder:'请选择预约状态', maxHeight: 400}">
                                        <option value=""></option>
                                        <?php if (isset($status_list)): foreach ($status_list as $item): ?>
                                            <option value="<?= $item['value'] ?>">
                                                <?= $item['name'] ?></option>
                                        <?php endforeach; endif; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require"> 客户电话 </label>
                                <div class="am-u-sm-9 am-u-md-6 am-u-lg-5 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[user_phone]"
                                           value="" placeholder="请输入客户电话" required>
                                </div>
                            </div>

                            <div class="am-form-group" id="serve_time">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label"> 服务用时 </label>
                                <div class="am-u-sm-9 am-u-md-6 am-u-lg-5 am-u-end">
                                    <input type="text" class="tpl-form-input" name="model[use_time]"
                                           value="" placeholder="请输服务用时">
                                    <!-- <div class="help-block">
                                        <small>注：只有保洁类型的需要设置时间</small>
                                    </div> -->
                                </div>

                            </div>
                            <!-- 表单提交按钮 -->
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button type="submit" class="j-submit am-btn am-btn-secondary am-btn-sm">添加
                                    </button>
                                </div>
                            </div>

                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 用户列表模板 -->
<script id="tpl-user-item" type="text/template">
    {{ each $data }}
    <div class="file-item">
        <a href="{{ $value.avatarUrl }}" title="{{ $value.nickName }} (ID:{{ $value.user_id }})" target="_blank">
            <img src="{{ $value.avatarUrl }}">
        </a>

        <input type="hidden" name="model[user_id]" value="{{ $value.user_id }}">
    </div>
    {{ /each }}
</script>

<!-- 订单列表模板 -->
<script id="tpl-order-item" type="text/template">
    {{ each $data }}
    <div class="am-u-sm-9 am-u-end">
        <input type="text" class="tpl-form-input" name="model[user_order_name]"
               value="{{ $value.order_no }} {{ $value.total_price }} (ID:{{ $value.user_name }})" readonly>
    </div>

    <input  id="order_input" type="hidden" name="model[user_order_id]" value="{{ $value.order_id }}">
    {{ /each }}
</script>

<script src="assets/store/js/select.data.js?v=<?= $version ?>"></script>
<script>
    $("#serve_time").hide();
    $(function () {
        
        // 选择用户
        $('.j-selectUser').click(function () {
            var $userList = $('.user-list');
            $.selectData({
                title: '选择用户',
                uri: 'user/lists_user',
                dataIndex: 'user_id',
                done: function (data) {
                    var user = [data[0]];
                    $('.user-id').val(user[0].user_id);
                    $userList.html(template('tpl-user-item', user));
                }
            });
        });
        $('.type-select').on('change', function() {

            console.log(12);
            $('input[name="sel_type_name"]').val($('.type-select').val());

            $('input[name="sel_type_name"]').change();

             console.log ($('.sel_type_name'));

        });

        $('.sel_type_name').on('change',function(){
            // if($(this).val() != 0){
            //     console.log($(this).val())
            //     $.ajax({
            //             type : "POST",
            //             contentType: "application/json;charset=UTF-8",
            //             // url : '/index.php?s=/store/data.user/get_order_type&order_id='+data[0].order_id,
            //             url : '/index.php?s=/store/data.user/get_type_user&type_id=' + $(this).val(),
            //             success : function(result) {
            //                 var str = '<option value=""></option>';
            //                 for (let i = 0; i < result.length; i++) {
            //                     str += `<option value="${result[i].user_id}">${result[i].real_name}</option>`
            //                 }
            //                 $('#select')[0].innerHTML = str;
            //             },
            //             error : function(e){
            //                 console.log(e.status);
            //             }
            //         });
            // }
        });
        // 选择用户
        $('.j-selectOrder').click(function () {
            var $userOrderList = $('.user-order-list');
            var user_id = $('.user-id').val();
            $.selectData({
                title: '选择订单',
                uri: 'user/get_order&user_id='+user_id,
                dataIndex: 'order_id',
                done: function (data) {
                    var user_order = [data[0]];
                    $userOrderList.html(template('tpl-order-item', user_order));
                    var typobj2 = $(".type-select");
                    $.ajax({
                        type : "POST",
                        contentType: "application/json;charset=UTF-8",
                        url : '/index.php?s=/store/data.user/get_order_type&order_id='+data[0].order_id,
                        // url : '/index.php?s=/store/data.user/get_goods_type&order_id=10062',
                        //  url : '/index.php?s=/store/data.user/get_time_list&type_id=1',

                        success : function(result) {
                            console.log(result);
                            if(result.data.name == '保洁服务'){
                                $("#serve_time").show();
                            }else{
                                $("#serve_time").hide()
                            }

                            $('.type-select').val(result.data.type_id);
                             // console.log($('.type-select').val(result.data.type_id));

                            // console.log(4444);
                            // console.log($('#order_input'))
                            getOrderName($('#order_input').val())
                            $(".am-form-group").eq(3).children(1).children(1).find('ul').children().each(function(){
                                // console.log($(this));
                                // console.log($(this)[0].dataset.value);
                                if($(this)[0].dataset.value == result.data.type_id)
                                {
                                    $(this)[0].className = 'am-checked';
                                    // console.log($(this).parent().parent().prev().find('span'));
                                    $(this).parent().parent().prev().find('span')[0].innerText = $(this).text().trim();
                                }else{
                                    // console.log($(this)[0]);
                                    $(this).removeClass('am-checked');
                                }
                                // var y = $(this).children().last();
                                // alert(y.text());
                            });

                            $('input[name="sel_type_name"]').val($('.type-select').val());
                            $('input[name="sel_type_name"]').change();
                            console.log($('.type-select').val());


                        },
                        error : function(e){
                            console.log(e.status);
                            console.log(e.responseText);
                        }
                    });
                }
            });

        });

        //获取订单商品列表
        function getOrderName(id) {
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : '/index.php?s=/store/data.user/get_order_goods&order_id=' + id,
                success:function(res){
                    // console.log(res)
                    var str = '';
                    for (let i = 0; i < res.length; i++) {
                        str += `<option value="${res[i].goods_id}">${res[i].goods_name}</option>`
                    }
                    $('#nameSelect')[0].innerHTML = str
                }
            })
        }


        //选择预约日期
        $('#date_id').on('change',function(){
            // console.log($(this).val())
            checkTime($('#date_id').val());
            getTimeList($('#orderType1').val(),$('#date_id').val());
        });

        //选择商品名称，获取预约状态
        $('#nameSelect').on('change',function(){
            //console.log($(this).val(),'22222')
            // if()
            getNameStatus($(this).val())
        })
        //获取商品预约状态
        function getNameStatus(id){
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : '/index.php?s=/store/data.user/get_goods_type&goods_id=' + id,
                success:function(res){
                    //console.log('111111',res)
                    $('#orderType').val(res.name)
                    getTimeList(res.type_id,$('#date_id').val());
                    $('#orderType1').val(res.type_id)
                }
            })
        }

        //检测时间是否正确
        function checkTime(date_id){
            // var type_id = $('#orderType1').val();
            // var date_id = $('#date_id').val();
            // var time_id = id;
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : '/index.php?s=/store/data.user/checkTime&date_id='+date_id,
                success:function(res){
                     if(res){
                        return res;
                     }else{
                         $('#date_id').val('<?php echo date('Y-m-d',time())?>');
                         alert('不可以操作过去的日期');
                     }

                }
            })
        }
        //选择预约日期
        $('#date_id').on('change',function(){
            // console.log($(this).val())
            // console.log($('#yuyueTime').val())
            //if($('#yuyueTime').val() != ''){
                getServiceName($('#orderType1').val(),$(this).val()/*,$('#yuyueTime').val()*/)
            //}
        });

        /*//选取预约时间
        $('#yuyueTime').on('change',function(){
            // console.log($(this).val())
            if($(this).val() != ''){
                getServiceName($('#orderType1').val(),$('#date_id').val()/!*,$(this).val()*!/)
            }
        })*/
        //获取服务人员
        function getServiceName(type_id,date_id/*,time_id*/){
            // var type_id = $('#orderType1').val();
            // var date_id = $('#date_id').val();
            // var time_id = id;
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : "/index.php?s=/store/data.user/get_server_man&type_id="+type_id+"&date_id="+date_id+"",//&time_id=${time_id}
                success:function(res){
                    // console.log('111111',res)
                    var str = ''
                    if(res.length > 0){
                        str = '<option value=""></option>';
                        for (let i = 0; i < res.length; i++) {
                            str += `<option value="${res[i].user_id}">${res[i].real_name}</option>`
                        }
                    }else{
                        str = '<option value=""> 暂无服务人员 </option>';
                    }
                    $('#select')[0].innerHTML = str;
                }
            })
        }
        //获取时间列表
        function getTimeList(type,date_id) {
            $.ajax({
                type : "POST",
                contentType: "application/json;charset=UTF-8",
                url : '/index.php?s=/store/data.user/get_time_list&type_id=' + type + '&date_id=' + date_id,
                success:function(res){
                    // console.log(res)
                    var str = '';
                    for (let i = 0; i < res.length; i++) {
                        str += `<option value="${res[i].time_id}">${res[i].name}</option>`
                    }
                    $('#yuyueTime')[0].innerHTML = str
                }
            })
        }
        /**
         * 表单验证提交
         * @type {*}
         */
        $('#my-form').superForm();

    });
</script>
